<!--
 * @Date: 2020-09-21 18:25:45
 * @LastEditTime: 2020-09-29 17:02:33
 * @Description: 部门/乡镇/企业物资点
-->
<template>
  <div class="tab_box" :class="themeClass">
    <div class="head_box">
      <select class="search_select" v-model="searchType" @change="searchTypeChange">
        <option value="0">全部</option>
        <option value="1">部门，乡镇，企业物资点</option>
        <option value="2">村，社区物资点</option>
      </select>
      <select class="search_select" v-model="searchId" @change="changeselect">
        <option v-for="item in searchList" :key="item.id" :value="item.id">{{ item.value }}</option>
      </select>
      <div class="search_box">
        <div @click="getList" class="search_icon"></div>
        <input type="text" placeholder="请输入搜索的地点" v-model="name" @keyup.enter="getList" class="search" />
      </div>
      <div class="closeBtn" @click="close">
        <!-- <img src="../../assets/images/notice_closeW.png" alt="" srcset="" /> -->
      </div>
    </div>
    <div style="width: 100%; max-height: 811px">
      <div class="container" style="width: 99%">
        <table>
          <thead>
            <tr>
              <th class="trClas">储存地点</th>
              <th class="trClas">联络人</th>
              <th class="trClas">联系电话</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in Rescueteamlist" :key="index" :class="[item.state == 1 ? 'bg' : '', listIndex === index ? 'trBg' : '']" @click="trDbclick(item, index)">
              <td class="trClas">{{ item.storageLocation }}</td>
              <td class="trClas">{{ item.linkman }}</td>
              <td class="trClas">{{ item.phone }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import { getEmergencySuppliesPointList, getStreetList, getVillageList } from '@/api/index'
import { mapState } from 'vuex'
export default {
  props: {
    type: {
      type: String,
      default: 'zy-yjwzd'
    }
  },
  data () {
    return {
      Rescueteamlist: [],
      streetId: null,
      villageId: null,
      listIndex: -1, // 选中第几个
      name: '',
      theme1: 'dark',
      searchList: [
        {
          id: null,
          value: '全部'
        }
      ],
      searchId: null,
      searchType: '0'
    }
  },
  mounted () {
    setTimeout(() => {
      this.getList()
    }, 500)
    this.searchType = this.type === 'zy-yjwzd' ? '0' : this.type === 'zy-yjwzd-bxq' ? '1' : '2'
  },
  watch: {
    type: {
      immediate: true,
      handler: function (newVal) {
        if (newVal === 'zy-yjwzd-bxq') {
          // 乡镇街道
          this.searchType = '1'
          this.getList()
          this.searchTypeChange()
        } else if (newVal === 'zy-yjwzd-cq') {
          // 村，社区
          this.searchType = '2'
          this.getList()
          this.searchTypeChange()
        }
      }
    }
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.$store.getters.getTheme}`
    }
  },
  methods: {
    changeselect () {
      this.getList()
    },
    close () {
      this.$emit('close')
    },
    // 双击行
    trDbclick (item, index) {
      this.listIndex = index
      this.$emit('trdblclick', {
        id: item.id,
        firstTag: 'yjzy',
        tag: 'yjzyWZD',
        lng: item.x,
        lat: item.y,
        ...item
      })
    },
    getList () {
      const params = {
        type: this.searchType !== '0' ? this.searchType : null
      }
      if (this.searchType === '1') {
        params.streetId = this.searchId
      }
      if (this.searchType === '2') {
        params.villageId = this.searchId
      }
      if (this.name) {
        params.name = this.name
      }
      console.log(params, this.type)
      getEmergencySuppliesPointList(params).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.Rescueteamlist = res.result
          this.$emit('getlist', res.result)
        }
      })
    },
    searchTypeChange () {
      this.searchId = null
      const arr = [
        {
          id: null,
          value: '全部'
        }
      ]
      if (this.searchType === '1') {
        // this.type === 'zy-yjwzd-bxq'
        // 乡镇街道
        getStreetList().then(res => {
          res.result.forEach(e => {
            arr.push({
              id: e.id,
              value: e.streetName
            })
          })
        })
      } else if (this.searchType === '2') {
        // this.type === 'zy-yjwzd-cq'
        // 村，社区
        getVillageList().then(res => {
          res.result.forEach(e => {
            arr.push({
              id: e.id,
              value: e.villageName
            })
          })
        })
      }
      this.searchList = arr
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.head_box {
  width: 100%;
  height: 3.125rem /* 50/16 */;
  display: flex;
  justify-content: space-between;
}
.search_select {
  width: 8.75rem /* 140/16 */;
  height: 1.875rem /* 30/16 */;
  text-indent: 4px;
  @include themify($themes) {
    background-image: themed('select_bj');
    background-position: -7px -1px;
    background-size: 154px 40px;
    background-repeat: no-repeat;
    background-color: themed('yjzy_bg_search');
    border: none;
    outline: none;
    appearance: none;
    // border: 1px solid themed('yjzy_color_search');
    color: themed('yjzy_color_search');
  }
  // background: rgba(70, 159, 255, 0.1);
  // border: 1px solid #72e6ff;
  // box-shadow: 1px 4px 6px 0px #0c1422;
  outline: none;
  font-size: 12px;
  font-weight: 600;
  // color: #72e6ff;
  line-height: 24px;
}
select option {
  color: black;
}
.search_box {
  width: 150px /* 140/16 */;
  height: 1.875rem /* 30/16 */;
  background-image: url(../../assets/images/search_box_bj.png);
  position: relative;
  overflow: hidden;
  @include themify($themes) {
    background: themed('bz-point-search-bgColor');
  }
}
.search_icon {
  @include themify($themes) {
    background-image: themed('search_icon');
  }
  width: 11px;
  height: 11px;
  position: absolute;
  top: 9px;
  left: 6px;
  cursor: pointer;
}
.search {
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  // color: #ffffff;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
}
.closeBtn {
  width: 3.25rem /* 52/16 */;
  height: 3.25rem /* 52/16 */;
  position: absolute;
  cursor: pointer;
  @include themify($themes) {
    background: themed('bz-point-close-bg1');
    background-repeat: no-repeat;
    top: themed('yjzy_closeBtn_position_t');
    right: themed('yjzy_closeBtn_position_r');
  }
}
.tab_box {
  width: 31.25rem /* 500/16 */;
  height: 100%;
  @include themify($themes) {
    background: themed('bz-point-bg');
  }
  // background-image: url('../../assets/images/dispatch_list_bj.png');
  background-size: 100% 100%;
  margin-left: auto;
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px /* 10/16 */;
  box-sizing: border-box;
  z-index: 99;
  animation: inBox 0.5s linear;
}
.tab_box .container table thead tr {
  // @include themify($themes) {
  //   background: themed('yjzy_bg_Wbg_tabThTwo');

  // }
  @include themify($themes) {
    color: themed('bz-point-table-head-font');
    border-bottom: 1px solid themed('bz-point-table-color');
  }
  // color: #ffffff;
  opacity: 0.5;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-around;
  width: 98%;
}
.tab_box .container table tbody {
  width: 100%;
  // max-height: 767px;
  overflow-y: auto;
  // border-bottom:1px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
  padding: 10px 0;
  height: calc(100vh - 100px);
}
.bg td {
  @include themify($themes) {
    background: themed('tj_color');
  }
  // background: #1b393f;
}
.trBg {
  @include themify($themes) {
    background: themed('tr_bgcolor');
    color: #fff;
  }
}
.container table {
  @include themify($themes) {
    color: themed('tj_color');
  }
  // color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #000;
}

.container table thead tr {
  width: 100%;
  box-sizing: border-box;
}
.container table tbody tr {
  width: 98%;
  line-height: 25px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.container table tbody tr td {
  text-align: center;
}
.trClas {
  width: 33%;
  text-align: center;
}
// 滚动条整体部分
.tab_box .container table tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.tab_box .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('bz-scrollbar-thumb-color');
  }
}
//滚动条的轨道
.tab_box .container table tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('bz-scrollbar-track-color');
  }
}
input::-webkit-input-placeholder {
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
@keyframes inBox {
  0% {
    left: -500px;
  }
  90% {
    left: 20px;
  }
  100% {
    left: 0;
  }
}
</style>
